<template>
	<view class="container">
		<view class="title">
			<u-icon name="edit-pen-fill" color="#5e84bc" size="200"></u-icon>
		</view>
		<view class="input_box">
			<view style="width: 400rpx;">
				
				<u-input v-model="local" placeholder="选择场馆" @click="selectLocal" type="select" placeholder-style="padding-left: 10rpx;" style="background-color: #FFFFFF;">
				</u-input>
				<u-select v-model="show" mode="single-column" placeholder="选择场馆" :list="list" @confirm="confirm" style="background-color: #FFFFFF;">
					<text>name</text>
				</u-select>
			</view>
			<view style="width: 200rpx;">
				<u-input v-model="name" placeholder="座位号" placeholder-style="padding-left: 10rpx;"
					style="background-color: #FFFFFF;" />
			</view>
		</view>


		<view class="foot">
			<text>
				监督占座将有效减少图书馆占座现象，提高座位使
				用效率。感谢您做出的贡献，维护图书馆秩序，您
				将获得额外积分。
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				local: '',
				show: false,
				list: [{
						value: '1',
						label: '阳光图书馆-A'
					},
					{
						value: '2',
						label: '阳光图书馆-B'
					}
				],
			}
		},
		
		methods: {
			selectLocal() {
				this.show = true
			}
		}
	};
</script>

<style lang="scss">
	.container {
		background-color: #dee4f1;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;


		.title {
			height: 300rpx;
			width: 100%;
			// background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.input_box {
			width: 100%;
			height: 300rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				margin: 0 5rpx;
			}

		}

		.foot {
			width: 100%;
			display: flex;
			justify-content: center;
			color: #75aae6;
		}
	}
</style>
